<template>
  <div class="member-information">
    <!-- 个人信息 -->
    <div class="header">完善个人信息</div>
    <div class="item">
      <div class="item-name">姓名</div>
      <input type="text" placeholder="请输入姓名" v-model="realname">
    </div>
    <div class="item">
      <div class="item-name">性别</div>
      <picker @change="getSex"  :range="sexArr">
          <div class="picker" v-if="!sex">请选择性别</div>
          <div v-else>{{sex}}</div>
      </picker>
    </div>
    
    <div class="item">
      <div class="item-name">籍贯</div>
        <picker @change="getArea"   mode="selector" :range="areaArr">
          <div class="picker" v-if="!birthArea">请选择籍贯</div>
          <div v-else>{{birthArea}}</div>
        </picker>
    </div>
    <div class="item">
      <div class="item-name">所在地区</div>
      <picker @change="getAddress"   mode="region">
          <div class="picker" v-if="!addressProvince">请选择所在地区</div>
          <div v-else>{{addressProvince}} {{addressCity}} {{addressArea}}</div>
        </picker>
    </div>
    <div class="item item-tag">
      <div class="item-name">个性化标签</div>
      <input type="text" placeholder="输入标签" v-model="tag" class="tag-input">
      <div class="add-tag" @click="addTag">添加</div>
      
      <div class="tag-list" v-if="tagList.length>0">
        <div 
        class="tag-list-item"
        v-for="(item,index) of tagList"
        :key="index"
        >
        <div>{{item}}</div>
        <img src="../../../../static/images/delete.png" alt="" @click="delTag(index)">
      </div>
      </div>
    </div>
    <div class="item">
      <div class="item-name">个人简介</div>
      <textarea v-model="desc" placeholder="输入个人简介"></textarea>
    </div>

    <!-- 个人信息 end -->

    <!-- 完善教育信息 -->
    <div class="header">完善教育信息</div>
    <div class="item">
      <div class="item-name">毕业院校</div>
      <input type="text" placeholder="请输入毕业院校" v-model="school">
    </div>
    <div class="item last-item">
      <div class="item-name">学历层次</div>
      <picker @change="getQualification"  :range="qualificationArr">
        <div class="picker" v-if="!qualification">请选择学历</div>
        <div v-else>{{qualification}}</div>
      </picker>
    </div>

    <!-- 完善教育信息 end -->

    <!-- 完善企业信息 -->
    <!-- <div class="company-wrapper">
      <div class="header" >完善企业信息</div>
      <div v-for="(item,index) of companyList" :key="index">
        <div class="item" v-if="showFlag">
          <select_self  
            arrTag="企业名称"
              @getItem="getCompany"
                @getSearch="getSearch($event,index)"
                api="https://www.rzkeji.com/api/ucenter/companyInfoSearch"
                params="key_word"
                :initcompanyName='item.initcompanyName'
                ></select_self>
        </div>
        <div class="item">
        <div class="item-name">职位</div>
        <input type="text" placeholder="请输入职位" v-model="item.position">
      </div>
      <div class="item">
        <div class="item-name">企业经营范围</div>
        <input type="text" placeholder="请输入企业经营范围" v-model="item.companyRange">
      </div>
      <div class="item item-profile">
        <div class="item-name">企业简介</div>
      </div>
      <textarea   placeholder="输入企业简介"  class="text-area" v-model="item.companyBrief"/>
      <div class="img-list">
        <upLoadImgMy @getImgIdList="getProfileImg($event,index)" :imgListInit="item.imgListInit"></upLoadImgMy>
      </div>

      <div @click="delCompany(index)" class="company-btn" v-if="index!=0">删除企业信息</div>
    </div>
    <div @click="addCompany" class="company-btn">添加企业</div>
    </div> -->

    <!-- 完善企业信息 end -->
    <div class="submit-wrapper">
      <div class="submit" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import AREA from '../../../../static/json/area.json';
import upLoadImgMy from '@/components/uploadImg';
export default {
  data() {
    return {
      showPopupFlag:'',//标签弹窗
      realname:'',
      sex:'',
      sexArr:['男','女','保密'],
      companyName:'',
      
      tag:'',
      tagList:[],

      addressProvince:'',//所在地的省市区
      addressCity:'',
      addressArea:'',

      provinceArr:'',//籍贯省的json数组
      cityArr:'',//籍贯市的json数组
      multiArray:'',//籍贯的数组[[],[]]
      multiArrayCheckIndex:[0,0],//籍贯选中的选项的下标
      birthArea:'',//籍贯

      school:'',
      qualification:'',//学历
      qualificationArr:['小学','初中','高中','大专','本科','研究生','博士'],


      companyList:[//多个企业信息
        {
          initcompanyName:'',//初始话的企业名称
          companyName:'',//企业名称
          position:'',//职位
          companyBrief:'',//企业文字简介
          companyRange:'',//企业经营范围

          imgListInit:'',//初始化的简介图片
          ProfileImg:'',//简介的图片
        }
      ],
      showFlag:false,
      areaArr:["平福乡","宁康乡","藤州镇","塘步镇","琅南镇","同心镇","金鸡镇","新庆镇","象棋镇","岭景镇","天平镇","蒙江镇,","和平镇","太平镇","古龙镇","东荣镇","大黎镇","其它"],
      desc:''
    }
  },
  components:{
    upLoadImgMy
  },
  methods: {
    getSex(e){
      //获取性别
       const index=e.target.value;
       this.sex=this.sexArr[index];
    },
    getCompany(e){
      console.log(e)
    },
    getSearch($event,index){//获取公司名称
      const text=$event.mp.detail;
      this.companyList[index].companyName=text;
    },
    async submit(){//上传
      const userToken=wx.getStorageSync('userToken');
      let companyList=[];
      this.companyList.forEach((item,index,arr)=>{
        let obj={};
        obj.company_name=item.companyName;
        obj.position=item.position;//职位
        obj.company_business_scope	=item.companyRange;
        obj.company_synopsis=item.companyBrief;
        obj.company_img_id=item.ProfileImg;
        companyList.push(obj)

      })
      const res=await this.$api.addUserInfo({
        realname:this.realname,
        sex:this.$currency.sexTag(this.sex),
        position:this.position,
        // home_province:this.province,
        // home_city:this.city,
        // home_area:this.area,
        birthplace:this.birthArea,
        vip_labels:this.tagList,
        province:this.addressProvince,
        city:this.addressCity,
        area:this.addressArea,
        graduated_school:this.school,
        education_level:this.qualification,
        // company_info_list:companyList,
        description:this.desc,
        user_token:userToken
      })
      this.$currency.showToast(res.data.message);
      setTimeout(()=>{
          if(res.data.level=='success'){
          wx.switchTab({url:'/pages/meMain/me/main'})
        }
      },1000)
    },
    getArea(e){
      //获取籍贯

      const address=e.target.value;
      this.birthArea=this.areaArr[address];

    },
    getCity(e){
      //联动省市
      const selectColumn=e.mp.detail.column;
      if(selectColumn==1){//省变化才进行联动,选市时候不联动
        return
      }
      const index=e.target.value;
      const province=this.provinceArr[index];
      this.cityArr=AREA[province];
      this.multiArrayCheckIndex=[index,0];//更新选中项的index
      this.$set(this.multiArray,1,AREA[province])
    },
    initMultiArray(){
      //初始化籍贯的2级数组
      this.provinceArr=Object.keys(AREA);
      this.cityArr=AREA[this.provinceArr[0]];
      this.multiArray=[this.provinceArr,this.cityArr];
    },
    getAddress(e){
      //获取所在地省市区
      const address=e.target.value;

      this.addressProvince=address[0];
      this.addressCity=address[1];
      this.addressArea=address[2];
    },
    addTag(){
      //添加标签
      if(this.tag==''){
        this.$currency.showToast('标签内容不能为空');
        return
      }
      this.tagList.push(this.tag);
      this.tag='';
    },
    delTag(index){
      //删除标签
      this.tagList.splice(index,1)
    },
    getQualification(e){
      //获取学历
      const index=e.target.value;
      this.qualification=this.qualificationArr[index];
    },
    getProfileImg($event,index){
      //获取企业简介图片数组
      console.log($event,index)
      this.companyList[index].ProfileImg=$event
      // this.ProfileImg=e;
    },
    addCompany(){
      //添加企业
      this.companyList.push({
          initcompanyName:'',//初始话的企业名称
          companyName:'',//企业名称
          companyBrief:'',//企业文字简介
          companyRange:'',//企业经营范围

          imgListInit:[],//初始化的简介图片
          ProfileImg:[],//简介的图片
        })
    },
    delCompany(index){
      //删除企业
      this.companyList.splice(index,1);
    },
    async getUserInfo(){
      const userToken=wx.getStorageSync('userToken');
     const res=await this.$api.getUserInfo({
        user_token:userToken
      })
      if(res.data.level=='success'){
        const userInfo=res.data.data.user_info;
        this.school=userInfo.graduated_school;
        this.qualification=userInfo.education_level;
        
        const userVip=userInfo.user_vip;
        this.realname=userVip.realname;
        this.companyName=userInfo.company_name;
        this.sex=userInfo.sex;
        // this.province=userInfo.home_province;
        // this.city=userInfo.home_city;
        // this.area=userInfo.home_area;
        this.birthArea=userInfo.birthplace;
        this.tagList=userInfo.user_label_list;

        this.addressProvince=userInfo.province;
        this.addressCity=userInfo.city;
        this.addressArea=userInfo.area;
        
        this.companyRange=userInfo.company_business_scope;
        this.companyBrief=userInfo.company_synopsis;
         this.desc=userInfo.description;

        // const companyList=userVip.company_info_list;
        // let arr=[];
        // let arrImg=[];
        // let arrName=[];
        // companyList.forEach((item,index)=>{
        //   let obj={};
        //   obj.initcompanyName=item.company_name;
        //   obj.companyName=item.company_name;
        //   obj.position=item.position;//职位
        //   obj.companyRange	=item. company_business_scope;
        //   obj.companyBrief=item.company_synopsis;
        //   obj.ProfileImg=item.img_list;
        //   obj.imgListInit=item.img_list;
        //   arr.push(obj)
        //   arrName.push(item.company_name);
        //   arrImg.push(item.img_list);

        // })
        // this.companyList=arr;
        // for(let j=0,len=companyList.length;j<len;j++){
        //   this.$set(this.companyList[j],'initcompanyName',arrName[j]);
        //   this.$set(this.companyList[j],'imgListInit',arrImg[j]);
        // }
       
        this.$store.dispatch('_setWXUserInfo',res.data.user_info);   //把获取到的用户的信息存放在vuex中进行管理
      }
      this.showFlag=true
    },
    initData(){
      this.showPopupFlag='';//标签弹窗
      this.realname='';
      this.sex='';
      this.sexArr=['男','女','保密'];
      this.companyName='';
      
      this.tag='';
      this.tagList=[];

      this.addressProvince='';//所在地的省市区
      this.addressCity='';
      this.addressArea='';

      this.provinceArr='';//籍贯省的json数组
      this.cityArr='';//籍贯市的json数组
      this.multiArray='';//籍贯的数组[[];[]]
      this.multiArrayCheckIndex=[0,0];//籍贯选中的选项的下标
      // this.province='';//籍贯选中的省
      // this.city='';//籍贯选中的市
      // this.area='';//籍贯选中的区
      this.birthArea=''
      this.school='';
      this.qualification='';//学历
      this.qualificationArr=['小学','初中','高中','大专','本科','研究生','博士'],


      this.companyList=[//多个企业信息
        {
          initcompanyName:'',//初始话的企业名称
          companyName:'',//企业名称
          position:'',//职位
          companyBrief:'',//企业文字简介
          companyRange:'',//企业经营范围

          imgListInit:'',//初始化的简介图片
          ProfileImg:'',//简介的图片
        }
      ],
      this.desc='';
      this.showFlag=false
      
    }
    
  },
  onLoad(){
    this.initData()
    this.getUserInfo();
    // this.initMultiArray();

  }
}
</script>

<style lang="scss" scoped>
    @mixin baseBtn{
      color:#fff;
      background-color: rgb(22, 155, 213);
      text-align: center;
      border-radius:10px;
    }
    .header{
      font-weight: 600;
      padding:20px 0;
      
    }
    .member-information{
      width:calc(100% - 20px);
      margin-left:10px;
    }
    .item-tag{
      flex-wrap: wrap;
    }
    .item-profile{
      border-bottom: none !important;
    }
    .item{
      display:flex;
      align-items: center;
      border-bottom: 1px solid #eee;
      padding:15px 0;
      position: relative;
      picker{
        flex:1
      }
      textarea{
        border:1px solid #eee;
      }
      .delete{
      width:40px;
      height: 40px;
      position: absolute;
      top:-20px;
      left: -20px;
    }
      .item-name{
        min-width: 100px;
        white-space: nowrap;
        margin-right: 20px;
      }
      .tag-list{
        border-radius: 10px;
        margin-top:20px;
        width: 100%;
        display:flex;
        flex-wrap: wrap;
        align-content: flex-start;
        padding:5px;
        img{
          width:20px;
          height: 20px;
          position: absolute;
          right:-10px;
          top:-10px;
        }
      }
      .tag-list-item{
        border:1px solid #eee;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        padding:0 2px;
        margin:0 15px 15px 0;
        position: relative;
      }
      .tag-input{
        flex:1;
        height: 30px;
        line-height: 30px;
      }
      .add-tag{
        @include baseBtn;
        width:70px;
        height: 30px;
        line-height: 30px;
      }
      .picker{
        color:gray;
      }
      .upload-img{
        color:#fff;
        background-color: rgb(22, 155, 213);
        padding: 5px 15px;
        border-radius: 5px
      }
      select_self{
        flex:1;
      }
    }
    .last-item{
      padding-bottom:120px;
    }
    .text-area{
        border: 1px  solid gray;
        min-height: 60px;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
      }

    
    .company-btn{
      margin: 0 60px 60px 60px;
      color:#fff;
      background-color: rgb(22, 155, 213);
      border-radius: 5px;
      padding:10px;
      text-align:center;

    }
    .submit-wrapper{
      width: 100%;
      display: flex;
      justify-content: center;
      
      .submit{
      @include baseBtn;
      padding:10px 0;
      position:fixed;
      z-index:9999;
      bottom:0px;
      width:90%;
    }
    }
    
    .company-wrapper{
      padding-bottom:10px;
    }
</style>